<template>
    <el-header class="taobao-header">
        <div class="container">
            <div class="header-content">
                <div class="logo-area">
                    <router-link to="/">
                        <span class="logo-text">淘宝宝</span>
                    </router-link>
                </div>

                <div class="search-area">
                    <el-input
                        v-model="searchKeyword"
                        placeholder="请输入商品关键词"
                        @keyup.enter="handleSearch"
                    >
                        <template #append>
                            <el-button icon="el-icon-search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>

                <div class="user-area">
                    <router-link to="/user" class="user-link">
                        <el-avatar :size="30" class="user-avatar">U</el-avatar>
                        <span class="user-name">我的淘宝</span>
                    </router-link>
                    <router-link to="/cart" class="cart-link">
                        <el-badge :value="cartCount" class="badge">
                            <el-icon :size="24"><ShoppingCart /></el-icon>
                        </el-badge>
                    </router-link>
                </div>
            </div>
        </div>
    </el-header>
</template>

<script>
import { ShoppingCart } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
    components: { ShoppingCart },
    setup() {
        const store = useStore()
        const router = useRouter()
        const searchKeyword = ref('')

        const cartCount = computed(() => store.getters.cartCount)

        const handleSearch = () => {
            if (searchKeyword.value.trim()) {
                router.push({ path: '/search', query: { q: searchKeyword.value.trim() } })
                searchKeyword.value = ''
            }
        }

        return {
            searchKeyword,
            cartCount,
            handleSearch
        }
    }
}
</script>

<style scoped>
.taobao-header {
    background: var(--primary-color);
    height: 60px;
    padding: 0;
}

.header-content {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-area {
    width: 180px;
}

.logo-text {
    font-size: 26px;
    font-weight: bold;
    color: white;
    letter-spacing: 2px;
}

.search-area {
    flex: 1;
    max-width: 600px;
    margin: 0 20px;
}

.user-area {
    display: flex;
    align-items: center;
    min-width: 200px;
    color: white;
}

.user-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
    margin-right: 20px;
}

.user-avatar {
    background-color: rgba(255, 255, 255, 0.2);
    margin-right: 8px;
}

.user-name {
    font-size: 14px;
}

.cart-link {
    color: white;
    display: flex;
    align-items: center;
    position: relative;
}

.badge :deep(.el-badge__content) {
    top: 5px;
    right: 5px;
    background-color: #ffd700;
    color: #333;
    font-weight: bold;
}
</style>